<div id="demo_table">
<section class="content-header">
    <h1>
        用户管理
        <small>demo</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li class="active">用户管理</li>
    </ol>
</section>

<section class="content">
    <div class="row">
        <div class="col-sm-4">
            <input type="text" id="usersTreeSearch" class="form-control">

            <div id="usersTree"></div>
        </div>
        <div class="col-sm-8">
            <div class="box">
                <div class="box-header">
                    <div class="btn-group pull-left" data-type="actionBar">
                        <button type="button" class="btn btn-default" data-action="addByForm">添加</button>
                        <button type="button" class="btn btn-default" data-action="modify">修改</button>
                        <button type="button" class="btn btn-default" data-action="delete">删除</button>
                    </div>
                    <div class=" pull-right" data-type="columnControl">
                    </div>
                    <div class=" pull-right datatable-header-search" data-type="searchControl">
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="box-body">
                    <table class="table table-bordered table-striped table-hover"></table>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
$(function () {
    //模块ID(全系统唯一)
    var id = "#demo_table";

    //定义页面变量
    var $el = $(id);
    var $actionBar = $el.find("[data-type=actionBar]");
    var tableId = id + " table.table";
    var $table = $(tableId);
    var $editor = $el.find("[data-for=tp_editor]");
    var myTable;


    //定义增\删\改 方法
    var editor = {
        add: function () {
            USEN.modal({
                title: "创建",
                submitTxt: "创建",
                submitCb: function ($el) {
                    //提交表单
                    $el.find("form").ajaxSubmit({
                        url: './simdata/zb_kehuxinxi_add_action.json',
                        beforeSubmit: function (data) {
//                console.log("数据提交之前.")
                        },
                        success: function (data, state, obj) {
                            USEN.notifyAlert({
                                title: "提示:",
                                content: '提交成功,刷新Table组件'
                            });
                            $el.modal("hide");
                            if (myTable) myTable.ajax.reload();
                        }
                    })
                },
                filter: function (data) {
                    return _.template($editor.html())({
                        data: data
                    });
                }
            });
        },
        remove: function (data) {
            USEN.modal({
                title: "提示",
                content: "是否删除这条数据?",
                submitTxt: "删除",
                submitCb: function ($el) {
                    $.ajax({
                        url: "./simdata/zb_kehuxinxi_remove_action.json",
                        data: data,
                        success: function (result) {
                            USEN.notifyAlert({
                                title: "提示:",
                                content: '删除成功.'
                            });
                            $el.modal("hide");
                            if (myTable) myTable.ajax.reload();
                        }
                    })
                }
            })
        },
        modify: function (data) {
            USEN.modal({
                title: "修改",
                data: data,
                submitTxt: "修改",
                submitCb: function ($el) {
                    $el.find("form").ajaxSubmit({
                        url: './simdata/zb_kehuxinxi_modify_action.json',
                        beforeSubmit: function (data) {
                            console.log("数据提交之前.")
                        },
                        success: function (data, state, obj) {
                            USEN.notifyAlert({
                                title: "提示:",
                                content: '提交成功,刷新Table组件'
                            });
                            $el.modal("hide");
                            if (myTable) myTable.ajax.reload();
                        }
                    })
                },
                filter: function (data) {
                    return _.template($editor.html())({
                        data: data
                    });
                }
            });
        }
    };

    // 绑定列表编辑按钮事件
    $actionBar.find("[data-action]").on("click", function () {
        var action = $(this).data("action");
        var $selected = $table.find('tr.selected');
        switch (action) {
            case "addByForm" :
                editor.add();
                break;
            case "modify" :
                if ($selected.length > 0) {
                    editor.modify(myTable.row($selected).data());
                } else {
                    //提示"请选中要修改的行"
                    USEN.modal({
                        title: "提示",
                        content: "请选中要修改的行.",
                        cancelBtn: true,
                        cancelTxt: "关闭"
                    })
                }
                break;
            case "delete" :
                if ($selected.length > 0) {
                    editor.remove(myTable.row($selected).data());
                } else {
                    //提示"请选中要修改的行"
                    USEN.modal({
                        title: "提示",
                        content: "请选中要修改的行.",
                        cancelBtn: true,
                        cancelTxt: "关闭"
                    })
                }
                break;
        }
    });

    //初始化datatable数据列表
    myTable = new USEN.Datatable({
        //设置ID
        "id": tableId,
        //设置列控制模块容器
        "columnControl": id + " [data-type=columnControl]",
        //设置搜索模块容器
        "searchControl": id + " [data-type=searchControl]",
        //每行"操作"自定义action按钮回调
        onItemAction: function ($tr, action) {
            switch (action) {
                case "modify" :
                    editor.modify(this.row($tr).data());
                    break;
                case "delete" :
                    editor.remove(this.row($tr).data());
                    break;
            }
        },
        //设置首列选择
        select: {
            style: 'os',
            selector: 'td:first-child'
        },
        //动态数据OR静态数据 分页\排序\搜索
        "serverSide": false,
        //配置服务
        "ajax": "./simdata/zb_common_table.json",
        //列设置
        "columns": [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false,
                width: "30px"
            },
            { "title": "回款编号", "data": "p0"},
            { "title": "发票编号", "data": "p1"},
            { "title": "收款日期", "data": "p2"},
            { "title": "收款金额", "data": "p3"},
            { "title": "交款人", "data": "p4" },
            { "title": "操作", "data": null, bSortable: false, width: '200px', render: function (data, type, full, meta) {
                return  '<button data-item-action="modify" class="btn btn-primary">修改</button>&nbsp;&nbsp;' +
                        '<button data-item-action="delete" class="btn btn-danger">删除</button>'
            }}
        ]
    })

    //初始化用户树结构
    $("#usersTree").on("changed.jstree", function (e, data) {
        if (data.selected.length) {
            console.log(data);
            switch (data.action) {
                case 'ready' :
                case 'select_node' :
                    myTable.ajax.url('./simdata/zb_common_table.json?userid=' + data.selected[0]).load();
                    break;
            }

//        alert('The selected node is: ' + data.instance.get_node(data.selected[0]).text);
        }
    }).jstree({
        'core': {
            'themes': {
                'name': 'proton',
                'responsive': true
            },
            data: {
                url: "./simdata/jstree.json",
                dataType: "json"
            }
        },
        "plugins": [ "wholerow" , "types" , "search"],
        "types": {
            "default": {
                "icon": "glyphicon glyphicon-user"
            },
            "org": {
                "icon": "glyphicon glyphicon-leaf"
            }
        }
    });
    //绑定搜索框事件
    $("#usersTreeSearch").on("input propertychange", function () {
        $('#usersTree').jstree(true).search($(this).val());
    })

});
</script>
</div>